<div class="con">
  <div class="con_box">
    <div class="one">
      <div class="nav">
        当前位置：
        <a href="http://127.0.0.1:5500/dist/index.html" target="_blank">首页</a
        >-
        <a href="http://127.0.0.1:5500/dist/category.html" target="_blank"
          >木真了</a
        >-
        <a href="http://127.0.0.1:5500/dist/product.html" target="_blank"
          >旗袍</a
        >
      </div>
    </div>
    <div class="two">
      <div class="left">
        <div class="container">
          <div class="small-wrapper">
            <img class="lazy" data-original="./img/1.jpg" alt="" />
            <div class="focus"></div>
            <div class="mo"></div>
          </div>
          <div class="big-wrapper">
            <img class="lazy" data-original="./img/big1.jpg" alt="" />
          </div>
          <div class="item-list">
            <span class="item-box"><</span>
            <span class="item-box"><img class="lazy" data-original="./img/sm1.jpg" alt="" /></span>
            <span class="item-box"><img class="lazy" data-original="./img/sm2.jpg" alt="" /></span>
            <span class="item-box"><img class="lazy" data-original="./img/sm3.jpg" alt="" /></span>
            <span class="item-box"><img class="lazy" data-original="./img/sm4.jpg" alt="" /></span>
            <span class="item-box"><img class="lazy" data-original="./img/sm5.jpg" alt="" /></span>
            <span class="item-box"><img class="lazy" data-original="./img/sm6.jpg" alt="" /></span>
            <span class="item-box">></span>
          </div>
        </div>
        <div class="bot">
          <img class="lazy" data-original="http://images.shopin.net/s/images/lg-share-cn.gif" alt="" />
        </div>
      </div>
      <div class="right">
        <h2>木真了 旗袍 春夏 旗袍 MQCVCZ0437</h2>
        <div class="sub-title">木真了MQCVCZ0437</div>
        <div class="sub_money">
          <p>
            <span>上品折扣价</span>：<span class="a">￥</span>
            <span class="b" id="product_id1">1192.00 </span>
          </p>
          <p><s>吊牌价：2980.00元</s> &nbsp;&nbsp;&nbsp;&nbsp;</p>
        </div>
        <div class="sub_sale">
          <ul class="fl">
            <li>促销信息：</li>
          </ul>
          <ul class="fr">
            <li>
              <span class="disct">折扣</span>&nbsp;&nbsp;店庆主轴_2件折上8折
            </li>
            <li>
              <span class="disct">折扣</span
              >&nbsp;&nbsp;店庆主轴_2件折上8折;3件折上7折
            </li>
            <li>
              <span class="disct">包邮</span
              >&nbsp;&nbsp;全场购物实付满288元包邮（偏远地区除外）
            </li>
            <li id="promotionInfo">
              <span class="disct">直降</span>&nbsp;&nbsp;已优惠￥
              <div style="display: inline" id="forwardDown">
                1788.0&nbsp;&nbsp;
              </div>
            </li>
          </ul>
        </div>
        <div>
          以上活动部分门店有效<br />
          温馨提示：受疫情影响,货物运输时间会有延迟。由此为您带来不便，敬请谅解
          ！
        </div>
        <div class="sub_color">
          <div class="fri">
            <h4>全部颜色：</h4>
            <div class="allColor">
              <img class="lazy" data-original="http://images.shopin.net/images/1008/2018/08/15/1f31845ef3f4028d17320b59ec23af5a_0.jpg_resize400"alt="木真了 旗袍  春夏 旗袍 MQCVCZ0437乳白03"
                title="乳白03"
              />
            </div>
          </div>
          <div class="sed">
            <h4 class="fl">选择尺码：</h4>
            <span>MA</span>
            <span>LA</span>
            <span>XL</span>
            <span>2A</span>
            <span>尺码对照表》</span>
          </div>
          <div class="thi">
            <h4 class="fl">数量：</h4>
            <div class="pamount">
              <span class="btn">-</span>
              <input type="text" placeholder="&emsp;1" />
              <span class="btn">+</span>
              <span class="txt">(库存：2件)</span>
            </div>
          </div>
          <div class="fou">
            <div class="lef">
              <a class="buy">立即购买</a>
              <a class="car">放入购物车</a>
            </div>
            <div class="rig">
              <a style="cursor: pointer; color: #f40; font-size: 12px"
                >收藏该商品</a
              >
            </div>
          </div>
          <span class="six"></span>
        </div>
        <div class="cx">
          <img class="lazy" data-original="http://images.shopin.net/s/images/ico_chengxin.gif?v0107"
            alt=""
            style="width: 100%"
          />
        </div>
      </div>
    </div>
  </div>
  <div class="thr">
    <!-- 侧边品牌推荐同类热卖 -->
    <div class="box">
      <div class="b_left">
        <p class="hot">品牌推荐</p>
        <div class="box_bot">
          <div class="cen">
            <img class="lazy" data-original="http://images.shopin.net/images/1008/2018/07/27/7e4ddb1ea21ae5c1abcf3f57131902e9_0.jpg_resize190"
              alt=""
            />
            <a href="http://127.0.0.1:5500/dist/product.html"></a>
            <p>木真了 旗袍 春夏 旗袍 MQXVBZ0338</p>
            <div>
              <span>￥599.0</span>
              <s>￥3380</s>
            </div>
          </div>
        </div>
        <p class="hot">同类热卖</p>
        <div class="box_bot">
          <div class="cen">
            <img src="http://images.shopin.net/images/1008/2018/07/27/7e4ddb1ea21ae5c1abcf3f57131902e9_0.jpg_resize190"
              alt=""
            />
            <a href="http://127.0.0.1:5500/dist/product.html"></a>
            <p>木真了 旗袍 春夏 旗袍 MQXVBZ0338</p>
            <div>
              <span>￥599.0</span>
              <s>￥3380</s>
            </div>
          </div>
        </div>
      </div>
      <div class="b_rig">
        <!-- 商品介绍 -->
        <div class="pro">
          <div class="onSale">
            <ul class="p_top">
              <li>商品介绍</li>
              <li>抢购记录</li>
              <li>购物指南</li>
              <li>价格说明</li>
            </ul>
          </div>
          <div class="p_bot">
            <div class="item">
              <div class="clear">
                <h2 class="detail">商品属性 <i>Property</i></h2>
                <ul class="p-list">
                  <li title="木真了">品牌：木真了</li>
                  <li>价格：￥1192.00</li>
                  <li title="MQCVCZ0437">款号：MQCVCZ0437</li>
                </ul>
              </div>
              <a id="size"></a>
              <h2 class="detail">尺码对照表<i>Size</i></h2>
              <div>
                <img src="http://images.shopin.net/images/sizeref/10361-68251.jpg"
                  border="0"
                  onerror="error();"alt="尺码对照表"
                />
              </div>
              <h2 class="detail">
                商品详情<i>Detail</i
                ><i
                  style="
                    font-size: 12px;
                    font-weight: 500;
                    color: #777;
                    padding-left: 15px;
                  "
                  >由于面料感光程度以及显示器设置等因素，导致图片与实物有轻微色差，商品颜色请以实物为准。</i
                >
              </h2>
              <div class="pic">
                <img src="http://images.shopin.net/images/1008/2018/08/15/1f31845ef3f4028d17320b59ec23af5a_0.jpg"
                  alt="木真了 旗袍  春夏 旗袍 MQCVCZ0437"
                  procolorsid="4972823"
                  
                />
              </div>
              <div class="pic">
                <img src="http://images.shopin.net/images/1008/2018/08/15/1f31845ef3f4028d17320b59ec23af5a_1.jpg"
                  alt="木真了 旗袍  春夏 旗袍 MQCVCZ0437"
                  procolorsid="4972823"
                 
                />
              </div>
              <div class="pic">
                <img src="http://images.shopin.net/images/1008/2018/08/15/1f31845ef3f4028d17320b59ec23af5a_2.jpg"
                  alt="木真了 旗袍  春夏 旗袍 MQCVCZ0437"
                  procolorsid="4972823"
                 
                />
              </div>
              <div class="pic">
                <img src="http://images.shopin.net/images/1008/2018/08/15/1f31845ef3f4028d17320b59ec23af5a_3.jpg"
                  alt="木真了 旗袍  春夏 旗袍 MQCVCZ0437"
                  procolorsid="4972823"
                  
                />
              </div>
              <div class="pic">
                <img src="http://images.shopin.net/images/1008/2018/08/15/1f31845ef3f4028d17320b59ec23af5a_4.jpg"
                  alt="木真了 旗袍  春夏 旗袍 MQCVCZ0437"
                  procolorsid="4972823"
                 
                />
              </div>
              <div class="pic">
                <img src="http://images.shopin.net/images/1008/2018/08/15/1f31845ef3f4028d17320b59ec23af5a_5.jpg"
                  alt="木真了 旗袍  春夏 旗袍 MQCVCZ0437"
                  procolorsid="4972823"
                 
                />
              </div>
            </div>
          </div>
          <div class="box-product">
            <div class="onSale">
              <ul class="p_top">
                <li>商品介绍</li>
                <li>抢购记录</li>
                <li>购物指南</li>
                <li>价格说明</li>
              </ul>
            </div>
          </div>
          <div class="tabl">
            <table>
              <tr>
                <th>买家</th>
                <th>颜色</th>
                <th>尺码</th>
                <th>购买数量</th>
                <th>成交时间</th>
              </tr>
              <tr>
                <td>微信粉丝</td>
                <td>乳白03</td>
                <td>2A</td>
                <td>1</td>
                <td>2021-04-22 09:20:45</td>
              </tr>
              <tr>
                <td>微信粉丝</td>
                <td>乳白03</td>
                <td>LA</td>
                <td>1</td>
                <td>2021-07-02 05:27:06</td>
              </tr>
              <tr>
                <td>微信粉丝</td>
                <td>乳白03</td>
                <td>MA</td>
                <td>1</td>
                <td>2021-14-04 19:24:16</td>
              </tr>
              <tr>
                <td>微信粉丝</td>
                <td>乳白03</td>
                <td>SA</td>
                <td>1</td>
                <td>2021-14-25 14:12:01</td>
              </tr>
            </table>
          </div>
          <div class="onSale">
            <ul class="p_top">
              <li>商品介绍</li>
              <li>抢购记录</li>
              <li>购物指南</li>
              <li>价格说明</li>
            </ul>
          </div>
          <!-- 价格说明 -->
          <div class="tabf">
                    <h3>价格说明：</h3>
                    <p>
                    <b>上品折扣价：</b
                    >上品折扣价为商品的销售价，是您最终决定是否购买商品的依据。
                    </p>
                    <p>
                    <b>划线价：</b
                    >商品展示的划横线价格为参考价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。
                    </p>
                    <p>
                    <b>异常问题：</b
                    >商品促销信息以商品详情页“促销信息”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。
                    </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="./javascripts/jQuery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
<!-- 放大镜功能 -->
<script>
  function Magnifier() {
    this.small_wrapper_ele = document.querySelector(".small-wrapper");
    this.small_img_ele = this.small_wrapper_ele.querySelector("img");
    this.focus_ele = document.querySelector(".focus");
    this.big_wrapper_ele = document.querySelector(".big-wrapper");
    // big 部分元素;
    this.big_img_ele = this.big_wrapper_ele.querySelector("img");
    // console.log(this.small_wrapper_ele,this.focus_ele,this.big_wrapper_ele,this.big_img_ele)
    this.change_img_ele = document.querySelectorAll(".item-list img");
    // console.log(this.change_img_ele)
  }
  // 1. 事件绑定 ;
  // 数据 : dom对象
  // 鼠标的位置; => 给元素跟随功能用的;
  Magnifier.prototype.bindEvent = function () {
    var magnifier_instance = this;
    this.small_wrapper_ele.onmouseover = function () {
      magnifier_instance.toggle("show");
    };
    this.small_wrapper_ele.onmouseout = function () {
      magnifier_instance.toggle("hide");
    };
    this.small_wrapper_ele.onmousemove = function (evt) {
      var e = evt || event;
      magnifier_instance.move(e.offsetX, e.offsetY);
    };
    this.change_img_ele[0].onclick = function () {
      magnifier_instance.change_img_one();
    };
    this.change_img_ele[1].onclick = function () {
      magnifier_instance.change_img_two();
    };
    this.change_img_ele[2].onclick = function () {
      magnifier_instance.change_img_thr();
    };
    this.change_img_ele[3].onclick = function () {
      magnifier_instance.change_img_fou();
    };
    this.change_img_ele[4].onclick = function () {
      magnifier_instance.change_img_fiv();
    };
    this.change_img_ele[5].onclick = function () {
      magnifier_instance.change_img_six();
    };
  };
  // 2. 元素显示隐藏功能;
  // dom的display属性操作就可以实现;
  // 做一个显示隐藏的逻辑; (功能判断)
  Magnifier.prototype.toggle = function (type) {
    switch (type) {
      case "show":
        this.focus_ele.style.display = "block";
        this.big_wrapper_ele.style.display = "block";
        break;
      case "hide":
        this.focus_ele.style.display = "none";
        this.big_wrapper_ele.style.display = "none";
        break;
    }
  };
  // 3. 元素跟随移动功能;
  // 让元素跟随移动即可;
  Magnifier.prototype.move = function (x, y) {
    _left = x - 150;
    _top = y - 150;
    // 给focus定位 :
    _left = _left < 0 ? 0 : _left;
    _top = _top < 0 ? 0 : _top;
    _left = _left > 150 ? 150 : _left;
    _top = _top > 150 ? 150 : _top;
    this.focus_ele.style.left = _left + "px";
    this.focus_ele.style.top = _top + "px";
    var _left_prop = (_left / 150) * 250;
    var _top_prop = (_top / 150) * 250;
    this.big_img_ele.style.left = -_left_prop + "px";
    this.big_img_ele.style.top = -_top_prop + "px";
  };
  // 4.点击的时候更改图片
  Magnifier.prototype.change_img_one = function () {
    this.small_img_ele.src = "./img/1.jpg";
    this.big_img_ele.src = "./img/big1.jpg";
    // console.log(this.small_img_ele)
  };
  Magnifier.prototype.change_img_two = function () {
    this.small_img_ele.src = "./img/2.jpg";
    this.big_img_ele.src = "./img/big2.jpg";
  };
  Magnifier.prototype.change_img_thr = function () {
    this.small_img_ele.src = "./img/3.jpg";
    this.big_img_ele.src = "./img/big3.jpg";
    // console.log(this.small_img_ele)
  };
  Magnifier.prototype.change_img_fou = function () {
    this.small_img_ele.src = "./img/4.jpg";
    this.big_img_ele.src = "./img/big4.jpg";
  };
  Magnifier.prototype.change_img_fiv = function () {
    this.small_img_ele.src = "./img/5.jpg";
    this.big_img_ele.src = "./img/big5.jpg";
    // console.log(this.small_img_ele)
  };
  Magnifier.prototype.change_img_six = function () {
    this.small_img_ele.src = "./img/6.jpg";
    this.big_img_ele.src = "./img/big6.jpg";
  };
  new Magnifier().bindEvent();
//  渲染侧边数据
  $(function () {
    $.ajax({
      url: "./json/num.json",
    }).then(function (res) {
      render(res.datas);
    });
    function render(list) {
      $(".box_bot").html(
        list
          .map(
            (item) => `
            <div class="cen">
                <img src="${item.image}" alt=""/>
                <p>"${item.title}"</p>
                <p>HOT</p>
                <div><span>上品价"${item.price}"</span>
                </div>
            </div>`
          )
          .join("")
      );
    }
  });

  // 懒加载
  $(function () {
        $(".lazy").lazyload();
      });
</script>
